@import "./common";

.banner {
    .carousel {
        .carousel-inner {
            .item {
                img {
                    width: 100%;
                }
            }
        }
    }
}

.engine {
    padding-top: 105px;
    padding-bottom: 40px;
    background-color: #fbfaf7;

    .container {
        .row {
            .engine-box{
                display: flex;
                display: -webkit-flex;
                flex-wrap: wrap;
            }
            .S-phone{
                width: 100%;
            }
            .p1 {
                margin-bottom: 34px;
                font-size: 48px;
                color: #0078d7;
                font-weight: bold;

            }

            .p2 {
                font-size: 30px;
                color: #666666;
                margin-bottom: 80px;
            }


            .char {
                display: flex;
                display: -webkit-flex;
                align-items: flex-start;
                margin-bottom: 46px;

                
                .char-img {
                    position: relative;
                    margin-right: 14px;
                    width: 22%;
                    padding-top: 22%;
                    background-color: #0078d7;
                    flex: 0 0 auto;
                    border-radius: 5px;
                    
                    img {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                        width: 50%;
                    }
                }

                &:nth-of-type(2),&:nth-of-type(4){
                    img{
                        width: 70%;
                    }
                }

                &:nth-of-type(3){
                    img{
                        width: 60%;
                    }
                }

                .char-text{
                    font-size: 19px;
                    color: #333;
                    font-weight: 500;

                    p{
                        &:nth-of-type(2){
                            font-size: 14px;
                            color: #666;
                        }
                    }
                }

            }

            

            
        }
    }
}

.adv{
    background-color: #fff;
    padding-top: 115px;
    padding-bottom: 95px;
    .container{
        .row{
            .phone-box{
                padding-top: 75px;
            }
            .engine-title{
                color: #8fc31f;
                
            }
        }
    }

    .adv-wrapper{
        li{
            display: flex;
            display: -webkit-flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 16px;


            &:nth-of-type(3){
                .adv-img{
                    img{
                        width: 45%;
                    }
                }
            }

            .adv-img{
                position: relative;
                width: 9%;
                padding-top: 9%;
                background-color: #8fc31f;
                border-radius: 50%;
                margin-right: 10px;
                img{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    width: 55%;
                }
            }
            p{
                font-size: 14px;
                color: #666;
                margin: 0;
            }
        }
    }
}

.product{
    padding-top: 115px;
    padding-bottom: 145px;
    background-color: #0079d7;

    .container{
        color: white;
        h2{
            margin: 0;
            margin-bottom: 72px;
            font-size: 48px;
            text-align: center;
        }

        .product-box{
            display: flex;
            display: -webkit-flex;
            flex-wrap: wrap;
            justify-content: space-between;

            &::before,&::after{
                flex-basis: 100%;
            }
            .product-wrapper{
                display: flex;
                display: -webkit-flex;
                justify-content: space-between;
                margin-bottom: 76px;
                .img-box{
                    position: relative;
                    padding-top: 16%;
                    width: 16%;

                    img{
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                    }
                }
                .product-text{
                    font-size: 32px;
                    flex: 0 0 78%;

                    p:first-child{
                        line-height: 100%;
                    }
                    p:last-child{
                        font-size: 14px;
                        word-break: break-all;
                        line-height: 180%;
                    }
                }
            }
            
        }
    }
}

.case{
    padding-top: 85px;
    padding-bottom: 38px;
    .container{
        .case-text{
            display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            align-items: center;
            p{
                font-size: 14px;
                color: #2a2a2a;
                &:nth-of-type(1){
                    font-size: 34px;
                }
            }
        }

        .case-box{
            margin-top: 45px;
            .game-wrapper{
                display: flex;
                display: -webkit-flex;
                flex-wrap: wrap;
                margin-left: 8.3333333%;
                justify-content: space-around;
                .game{
                    margin-bottom: 12px;
                    margin-left: 3%;
                    flex: 0 0 12%;
                    text-align: center;
                    font-size: 14px;
                    img{
                        width: 100%;
                    }
                }
            }
        }
    }
}

.coop{
    background-color: #f4f4f4;
    padding-bottom: 64px;
    .container{
        padding-top: 40px;
        h2{
            font-size: 30px;
            margin: 0;
            color: #2a2a2a;
            line-height: 100%;
            sub{
                font-size: 40%;
                color:#777
            }
        }

        .coop-wrapper{
            display: flex;
            display: -webkit-flex;
            flex-wrap: wrap;
            justify-content: space-between;
            
            .coop-item{
                flex: 0 0 15%;
                margin-top: 20px;
                img{
                    width: 100%;
                }
            }
        }
    }
}



@media screen and (max-width:992px){
    .engine{
        .container{
            .row{
                .p1{
                    margin-bottom: 10px;
                    font-size: 30px;
                }
                .p2{
                    margin-bottom: 20px;
                    font-size: 20px;
                }
                .char{
                    margin-bottom: 25px;
                    .char-text{
                        font-size: 14px;
        
                        p:last-child{
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }

    .adv{
        padding-top: 80px;
        padding-bottom: 60px;
        .container{
            .row{
                .phone-box{
                    padding-top: 50px;
                }
            }
        }
    }

    .product{
        padding-top: 50px;
        padding-bottom: 0;

        .container{
            h2{
                font-size: 30px;
                margin-bottom: 30px;
            }

            .product-box{
                .product-wrapper{
                    margin-bottom: 20px;
                    .product-text{
                        font-size: 18px;
                        p:last-child{
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }

    .case{
        padding-top: 50px;

        .container{
            .case-box{
                margin-top: 20px;
            }
        }
    }
}

@media screen and (max-width:767px){
    .engine{
        padding-top: 35px;
        padding-bottom: 0;
        .container{
            .row{
                margin-bottom: 30px;
                .p1{
                    font-size: 26px;
                }
                .p2{
                    font-size: 16px;
                }
                .phone-box{
                    text-align: center;
                    .S-phone{
                        width: 50%;
                    }
                }
            }
        }
    }

    .case{
        .container{
            .case-text{
                p{
                    &:nth-of-type(1){
                        font-size: 26px;
                    }
                }
            }
            .case-box{
                .game-wrapper{
                    margin-left: 0;
                    margin-top: 10px;
                    
                    .game{
                        margin-left: 0;
                        padding-left: 3%;
                        padding-right: 3%;
                        flex-basis: 21%;
                        font-size: 12px;
                    }
                }
            }
        }
    }

    .coop{
        .container{
            .coop-wrapper{
                .coop-item{
                    flex: 0 0 30%;
                }
            }
        }
    }

    
}

@media screen and (min-width:992px) and (max-width:1200px){
    .engine{
        .container{
            .row{
                .p1{
                    margin-bottom: 20px;
                }
                .p2{
                    margin-bottom: 40px;
                }

                .char{
                    margin-bottom: 30px;
                }
            }
        }
    }

    .product{
        padding-top: 60px;
        padding-bottom: 0;

        .container{
            h2{
                margin-bottom: 60px;
            }

            .product-box{
                .product-wrapper{
                    margin-bottom: 50px;
                }
            }
        }
    }
}


